<style>
#test3 { color: blue; }
</style>
<div id="test-container">
  <div id="test1" id="one" style="color:green; outline: solid 1em currentColor"></div>
  <div id="test2" id="two" style="color:red; outline: solid 1em currentColor"></div>
  <div style="color:green">
    <div id="test3" style="color:currentColor; outline: solid 1em currentColor"></div>
  </div>
  <div id="test4" id="four" style="color:green"></div>
</div>
<script src="../../resources/js-test.js"></script>
<script>
description('Test that outline-color is non-inherit and currentColor is handled correctly.');
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var test3 = document.getElementById("test3");
var test3 = document.getElementById("test4");
test2.style.color = "green";
shouldBeEqualToString('getComputedStyle(test1).outlineColor', 'rgb(0, 128, 0)');
shouldBeEqualToString('getComputedStyle(test2).outlineColor', 'rgb(0, 128, 0)');
shouldBeEqualToString('getComputedStyle(test3).outlineColor', 'rgb(0, 128, 0)');
shouldBeEqualToString('getComputedStyle(test4).outlineColor', 'rgb(0, 128, 0)');
</script>
